<template>
  <!-- 包住所有内容的标签就叫根标签-一般用div -->
  <div>
    <h1>你好</h1>
    <h1>你坏</h1>

    <ul>
      <!-- 以前不报错，是因为以前没有ESLint -->
      <!-- 现在报错是因为有ESLint，它觉得下面的代码不规范就报错 -->
      <!-- <li v-for="item in list"> {{ item }}</li> -->
      <!-- 
        有一条规范是：写v-for，必须写:key
        key的值：有唯一值（id）给唯一值，没唯一值（id）就给下标
       -->
       <li v-for="(item, index) in list" :key="index">{{ item }} -- {{ index }}</li>
    </ul>

    <ul>
      <li v-for="item in list2" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['张三', '李四', '王五'],
      list2: [
        { id: 1, name: '张三' },
        { id: 2, name: '张三2' },
        { id: 3, name: '张三3' },
      ],
    }
  },
}
</script>

<style></style>
